<template>
  <n-drawer v-model:show="visiblity" placement="top">
    <div class="flex items-center justify-center h-[100%]">
      <n-input-group class="flex justify-center">
        <n-input
          v-model:value="keyword"
          placeholder="请输入关键词"
          :style="{
            width: '500px',
          }"
        ></n-input>
        <n-button
          ghost
          type="primary"
          :disabled="!keyword"
          size="large"
          @click="doSearch"
          >搜索</n-button
        >
      </n-input-group>
    </div>
  </n-drawer>
</template>

<script setup>
import { NDrawer, NInput, NButton, NInputGroup } from "naive-ui";
const visiblity = ref(false);
const keyword = ref("");
const openDrawer = () => {
  visiblity.value = true;
};
const route = useRoute();
const doSearch = () => {
  visiblity.value = false;
  navigateTo({
    name: "search-type-page",
    params: {
      type: "course",
      page: 1,
    },
    query: {
      keyword: keyword.value,
    },
  });
  keyword.value = "";
};
defineExpose({
  openDrawer,
  visiblity,
});
</script>
